<!-- from 7 5 2 7 1 8 9 2 0 -->
<template>
    <a-row :gutter="24">
        <a-col :md="24">
            <a-card :style="cardStyle" :bordered="false">
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <a-form layout="inline" @keyup.enter.native="searchQuery">
                        <a-row :gutter="24">
                            <a-col :md="5" :sm="24">
                                <a-form-item label="配送员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-select placeholder="选择配送员" allowClear v-model="queryParam.userId">
                                        <a-select-option v-for="(item, index) in deliveryManList" :key="index"
                                            :value="item.id">
                                            {{ item.username }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :md="5" :sm="24">
                                <a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-range-picker style="width: 100%" v-model="queryParam.createTimeRange"
                                        format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']" @change="onDateChange"
                                        @ok="onDateOk" />
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="24">
                                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                    <a-button type="primary" @click="searchQuery">查询</a-button>
                                    <a-button style="margin-left:8px" @click="searchReset">重置</a-button>
                                    <!-- <a-button style="margin-left: 8px" v-print="'#reportPrint'"
                                        icon="printer">打印</a-button>
                                    <a-button type="primary" style="margin-left: 8px" icon="download"
                                        @click="handleExportXlsBefore('商品库存')">导出</a-button>
                                    <a @click="handleToggleSearch" style="margin-left: 8px">
                                        {{ toggleSearchStatus ? '收起' : '展开' }}
                                        <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                                    </a> -->
                                </span>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <!-- table区域-begin -->
                <section ref="print" id="reportPrint">
                    <a-table bordered ref="table" size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
                        :components="handleDrag(columns)" :pagination="false" :scroll="scroll" :loading="loading"
                        @change="handleTableChange">
                        <span slot="action" slot-scope="text, record">
                            <a @click="lookDetail(record)">详情</a>
                        </span>
                        <template slot="customBarCode" slot-scope="text, record">
                            <div :style="record.imgName ? 'float:left;line-height:30px' : 'float:left;'">
                                {{ record.mBarCode }}</div>
                            <a-popover placement="right" trigger="click">
                                <template slot="content">
                                    <img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" />
                                </template>
                                <div class="item-info" v-if="record.imgName">
                                    <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)"
                                        class="item-img" title="查看大图" />
                                </div>
                            </a-popover>
                        </template>
                        <template slot="customRenderStock" slot-scope="text, record">
                            <a-tooltip :title="record.bigUnitStock">
                                {{ text }}
                            </a-tooltip>
                        </template>
                    </a-table>
                    <a-row :gutter="24" style="margin-top: 8px; text-align: right">
                        <a-col :md="24" :sm="24">
                            <a-pagination @change="paginationChange" @showSizeChange="paginationShowSizeChange"
                                size="small" show-size-changer :showQuickJumper="true" :current="ipagination.current"
                                :page-size="ipagination.pageSize" :page-size-options="ipagination.pageSizeOptions"
                                :total="ipagination.total" :show-total="(total, range) => `共 ${total} 条`">
                                <template slot="buildOptionText" slot-scope="props">
                                    <span>{{ props.value - 1 }}条/页</span>
                                </template>
                            </a-pagination>
                        </a-col>
                    </a-row>
                </section>
                <!-- table区域-end -->
                <delivery-modal ref="deliveryModal"></delivery-modal>
            </a-card>
        </a-col>
    </a-row>
</template>
  <script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { BillListMixin } from './mixins/BillListMixin'
import { getAction, getFileAccessHttpUrl } from '@/api/manage'
import { queryMaterialCategoryTreeList, queryDelivererList } from '@/api/api'
import { getMpListShort, openDownloadDialog, sheet2blob } from '@/utils/util'
import JEllipsis from '@/components/jeecg/JEllipsis'
import DeliveryModal from './modules/DeliveryModal'
import moment from 'moment'
import Vue from 'vue'
export default {
    name: 'MaterialStock',
    mixins: [JeecgListMixin],
    components: {
        JEllipsis,
        DeliveryModal,
    },
    data() {
        return {
            labelCol: {
                span: 5,
            },
            wrapperCol: {
                span: 18,
                offset: 1,
            },
            // 查询条件
            queryParam: {
                // column: 'createTime',
                // order: 'DESC',
                // categoryId: '',
                // materialParam: '',
                // position: '',
                // zeroStock: '0',
                // mpList: getMpListShort(Vue.ls.get('materialPropertyList')), //扩展属性
                // depotIds: '',

                userId: undefined,
                beginTime: undefined,
                endTme: undefined,
                roleType: Vue.ls.get('roleType'),
                pageSize: 10,
                currentPage: 1,
            },
            ipagination: {
                pageSize: 10,
                pageSizeOptions: ['11', '21', '31', '101', '201', '301', '1001', '2001', '3001'],
            },
            depotSelected: [],
            depotList: [],
            categoryTree: [],
            currentStock: '',
            currentStockPrice: '',
            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: 'rowIndex',
                    width: 40,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return t !== '合计' ? parseInt(index) + 1 : t
                    },
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    width: 60,
                    scopedSlots: { customRender: 'action' },
                },
                {
                    title: '名字',
                    dataIndex: 'username',
                    align: 'center',
                    scopedSlots: { customRender: 'username' },
                },
                {
                    title: '配送数量',
                    dataIndex: 'deliveryCount',
                    align: 'center',
                    scopedSlots: { customRender: 'deliveryCount' },
                },
                // { title: '名称', dataIndex: 'name', width: 140, ellipsis: true },
                // { title: '规格', dataIndex: 'standard', width: 100, ellipsis: true },
                // { title: '型号', dataIndex: 'model', width: 100, ellipsis: true },
                // { title: '颜色', dataIndex: 'color', width: 60, ellipsis: true },
                // { title: '类别', dataIndex: 'categoryName', width: 60, ellipsis: true },
                // { title: '仓位货架', dataIndex: 'position', width: 60, ellipsis: true },
                // { title: '单位', dataIndex: 'unitName', width: 60, ellipsis: true },
                // {
                //     title: '单价',
                //     dataIndex: 'purchaseDecimal',
                //     sorter: (a, b) => a.purchaseDecimal - b.purchaseDecimal,
                //     width: 60,
                // },
                // {
                //     title: '初始库存',
                //     dataIndex: 'initialStock',
                //     sorter: (a, b) => a.initialStock - b.initialStock,
                //     width: 60,
                // },
                // {
                //     title: '库存',
                //     dataIndex: 'currentStock',
                //     sorter: (a, b) => a.currentStock - b.currentStock,
                //     width: 60,
                //     scopedSlots: { customRender: 'customRenderStock' },
                // },
                // {
                //     title: '库存金额',
                //     dataIndex: 'currentStockPrice',
                //     sorter: (a, b) => a.currentStockPrice - b.currentStockPrice,
                //     width: 80,
                // },
                // {
                //     title: '重量',
                //     dataIndex: 'currentWeight',
                //     sorter: (a, b) => a.currentWeight - b.currentWeight,
                //     width: 60,
                // },
            ],
            url: {
                list: '/deliveryFlow/getDeliveryCount',
                exportXlsUrl: '/material/getListWithStock/exportExcel',
            },
            deliveryManList: [],
        }
    },
    created() {
        this.getDepotData()
        this.loadTreeData()
        this.listDeliveryManList()
    },
    mounted() {
        this.scroll.x = 1620
    },
    methods: {
        moment,
        getQueryParams() {
            let param = Object.assign({}, this.queryParam)
            if (this.depotSelected && this.depotSelected.length > 0) {
                param.depotIds = this.depotSelected.join()
            }
            // param.field = this.getQueryField()
            param.currentPage = this.ipagination.current
            param.pageSize = this.ipagination.pageSize
            return param
        },
        getDepotData() {
            getAction('/depot/findDepotByCurrentUser').then((res) => {
                if (res.code === 200) {
                    this.depotList = res.data
                } else {
                    this.$message.info(res.data)
                }
            })
        },
        getImgUrl(imgName, type) {
            if (imgName && imgName.split(',')) {
                type = type ? type + '/' : ''
                return getFileAccessHttpUrl('systemConfig/static/' + imgName.split(',')[0])
            } else {
                return ''
            }
        },
        loadTreeData() {
            let that = this
            let params = {}
            params.id = ''
            queryMaterialCategoryTreeList(params).then((res) => {
                if (res) {
                    that.categoryTree = []
                    for (let i = 0; i < res.length; i++) {
                        let temp = res[i]
                        that.categoryTree.push(temp)
                    }
                }
            })
        },
        searchQuery() {
            this.loadData(1)
        },
        loadData(arg) {
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination.current = 1
            }
            let params = this.getQueryParams() //查询条件
            this.loading = true
            getAction(this.url.list, params).then((res) => {
                if (res.code === 200) {
                    this.dataSource = res.data.rows
                    this.ipagination.total = res.data.total
                    this.tableAddTotalRow(this.columns, this.dataSource)
                }
                if (res.code === 510) {
                    this.$message.warning(res.data)
                }
                this.loading = false
            })
        },
        showMaterialInOutList(record) {
            let depotIds = ''
            if (this.depotSelected && this.depotSelected.length > 0) {
                depotIds = this.depotSelected.join()
            }

            this.$refs.materialInOutList.title = '查看商品库存流水'
            this.$refs.materialInOutList.initSetting('商品流水')
            this.$refs.materialInOutList.show(record, depotIds)
            this.$refs.materialInOutList.disableSubmit = false
        },
        handleExportXlsBefore() {
            if (this.depotSelected && this.depotSelected.length > 0) {
                this.queryParam.depotIds = this.depotSelected.join()
            } else {
                this.queryParam.depotIds = ''
            }
            this.handleExportXls('商品库存')
        },
        // exportExcel() {
        //   let aoa = [
        //     ['条码', '名称', '规格', '型号', '颜色', '类别', '单位', '单价', '初始库存', '库存', '库存金额', '重量'],
        //   ]
        //   for (let i = 0; i < this.dataSource.length; i++) {
        //     let ds = this.dataSource[i]
        //     let item = [
        //       ds.mBarCode,
        //       ds.name,
        //       ds.standard,
        //       ds.model,
        //       ds.color,
        //       ds.categoryName,
        //       ds.unitName,
        //       ds.purchaseDecimal,
        //       ds.initialStock,
        //       ds.currentStock,
        //       ds.currentStockPrice,
        //       ds.currentWeight,
        //     ]
        //     aoa.push(item)
        //   }
        //   openDownloadDialog(sheet2blob(aoa), '商品库存')
        // },
        listDeliveryManList() {
            let that = this
            queryDelivererList().then((res) => {
                if (res.code === 200) {
                    that.deliveryManList = res.data.users
                }
            })
        },
        searchReset() {
            this.queryParam = {
                userId: undefined,
                beginTime: undefined,
                endTme: undefined,
                roleType: Vue.ls.get('roleType'),
                pageSize: 10,
                currentPage: 1,
            }
            this.loadData(1)
        },
        onDateOk() {},
        onDateChange(value, dateString) {
            this.queryParam.beginTime = dateString[0]
            this.queryParam.endTime = dateString[1]
        },

        lookDetail(record) {
            this.$refs.deliveryModal.showDialog(record)
        },
    },
}
</script>
  
  <style scoped>
@import '~@assets/less/common.less';
</style>
  <style scoped>
.item-info {
    float: left;
    width: 30px;
    height: 30px;
    margin-left: 8px;
}
.item-img {
    cursor: pointer;
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>